<template>
  <div class="about">
    <div class="about-header">
      <h1>关于我</h1>
      <p class="subtitle">{{ basic.motto }}</p>
    </div>

    <div class="about-content">
      <!-- 个人简介部分 -->
      <section class="bio-section">
        <h2>个人简介</h2>
        <div class="bio-content">
          <div class="bio-text">
            <p>你好，我是{{ basic.name }}({{ basic.englishName }})，{{ basic.title }}。</p>
            <p>作为一名充满激情的开发者，我始终保持对技术的好奇心和学习热情。我相信技术不仅能够改变世界，更能为用户创造价值。在过去的工作中，我参与过多个大型项目的开发，涵盖从前端到后端的各个领域。</p>
            <p>我擅长使用 Vue.js、jquery 等现代前端框架，并且对 ASP.NET, csharp 等后端技术有一定的研究。在工作中，我不仅注重代码质量，还特别关注用户体验和产品性能的优化。</p>
            <p>除了技术开发，我也热衷于技术分享和团队协作。我经常参与开源项目，并在技术社区分享经验。我相信，好的技术不仅要解决问题，还要能够启发他人，带来更多可能性。</p>
          </div>
          <div class="bio-stats">
            <div class="stat-item">
              <span class="stat-number">10+</span>
              <span class="stat-label">年开发经验</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">5+</span>
              <span class="stat-label">项目经验</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">8+</span>
              <span class="stat-label">技术栈</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 兴趣爱好部分 -->
      <section class="interests-section">
        <h2>兴趣爱好</h2>
        <div class="interests-grid">
          <div 
            v-for="interest in interests" 
            :key="interest.title"
            class="interest-card"
          >
            <span class="interest-icon">{{ interest.icon }}</span>
            <h3>{{ interest.title }}</h3>
            <p>{{ interest.description }}</p>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { siteConfig } from '../config/site'

const basic = ref(siteConfig.basic)
const education = ref(siteConfig.education)
const skills = ref(siteConfig.skills)
const interests = ref(siteConfig.interests)
</script>

<style lang="scss" scoped>
.about {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;

  .about-header {
    text-align: center;
    margin-bottom: 4rem;

    h1 {
      font-size: 3rem;
      color: var(--primary-color);
      margin-bottom: 1rem;
    }

    .subtitle {
      font-size: 1.5rem;
      color: var(--text-color);
      opacity: 0.8;
    }
  }

  section {
    margin-bottom: 6rem;

    h2 {
      font-size: 2rem;
      color: var(--text-color);
      margin-bottom: 2rem;
      position: relative;
      padding-left: 1rem;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--primary-color);
        border-radius: 2px;
      }
    }
  }
}

.about-content {
  display: grid;
  gap: 4rem;
}

.bio-section {
  h2 {
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 2rem;
  }

  .bio-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;

    .bio-text {
      p {
        margin-bottom: 1.5rem;
        font-size: 1.1rem;
        line-height: 1.8;
        color: var(--text-color);
        opacity: 0.9;
      }
    }

    .bio-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1.5rem;

      .stat-item {
        text-align: center;
        padding: 1.5rem;
        background: rgba(var(--primary-color-rgb), 0.1);
        border-radius: 15px;

        .stat-number {
          display: block;
          font-size: 2.5rem;
          font-weight: bold;
          color: var(--primary-color);
          margin-bottom: 0.5rem;
        }

        .stat-label {
          font-size: 1rem;
          color: var(--text-color);
          opacity: 0.8;
        }
      }
    }
  }
}

.interests-section {
  h2 {
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 2rem;
    text-align: center;
  }
}

.interests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;

  .interest-card {
    text-align: center;
    padding: 2rem;
    background: var(--background-color);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }

    .interest-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
      display: block;
    }

    h3 {
      font-size: 1.4rem;
      color: var(--text-color);
      margin-bottom: 1rem;
    }

    p {
      color: var(--text-color);
      opacity: 0.8;
      line-height: 1.6;
    }
  }
}

@media (max-width: 768px) {
  .about {
    padding: 40px 1rem;

    .about-header {
      margin-bottom: 3rem;

      h1 {
        font-size: 2.2rem;
      }

      .subtitle {
        font-size: 1.2rem;
      }
    }
  }

  .bio-section {
    .bio-content {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  }
}
</style> 